<template>
  <div v-cloak>
    <div class="mine">
      <div class="mine-header">
        <i class="iconfont icon-fan"></i>
        <span>水珠钱包</span>
        <i class="iconfont icon-shezhi1" @click="goSetting()"></i>
      </div>
      <div class="mine-banner">
        <div class="mine-banner-headerpic">
          <img :src="portrait" v-if="hasLogin" @click="changeImg"/>
          <img src="../../../assets/weidenglu@2x.png" v-else @click="goLogin" />
        </div>
        <div class="mine-banner-username">
         
          <p class="login-please" v-if="!hasLogin">HI,请登录~</p>
          <div class="mine-banner-username-box" v-else>
            <p class="nickname"> 
                <span class="nickname-label">昵称:</span>
                <input id="nicknameId" class="nickname-ipt" @blur="blurNickname" type="text" v-model="nickname" :disabled="nicknameInp">
                <i class="icon iconfont icon-bianji nickname-btn" @click="changeNickname"></i>
            </p>
            <p class="tel">手机号：{{tel|phoneViewFilter}}</p>
          </div>
        </div>
        
        <ul class="mine-banner-nav">
          <li class="mine-banner-nav-item" v-for="(item,index) in navList" :key="index" @click="goPage(item.url)">
            <h3>{{item.count}}</h3>
            <p>{{item.word}}</p>
          </li>
        </ul>
      </div>
      <div class="mine-list">
        <div class="mine-list-item" v-for="(item,index) in listData" :key="index" @click="goPage(item.url)">
          <div class="mine-list-item-icon">
            <img :src="item.icon" />
          </div>
          <div class="mine-list-item-word">{{item.word}}</div>
          <div class="mine-list-item-extend">
            <i class="iconfont icon-jiankuohaoxiyou"></i>
          </div>
        </div>
      </div>
    <input type="file" id="imgInp" class="input-file" name="zm" capture="camera" accept="image/*" @change="submitImg()">    
    </div>
    <Foot aIndex="3"></Foot>
  </div>

</template>

<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import bus from '../../../js/lib/bus.js'
import commons from '../../../common/js/common.js'
import ChangeHeader from "../../../components/ChangeHeader";
import Top from 'components/Header/Header'
import Foot from 'components/Footer/Footer'
import { Indicator, MessageBox } from "mint-ui";

export default {
  name: 'mine',
  components: { Top,Foot },
  mixins: [ChangeHeader],
  data() {
    return {
      nicknameInp: true,
      portrait:"../static/img/logo.png",
      navList: [
        {
          icon: "../static/img/shenqingjilu.png",
          word: "申请记录",
          url: "./applyrecord.html",
          count:'0'
        },
        {
          icon: "../static/img/quxianjilu.png",
          word: "取现记录",
          url: "./enchashList.html",
          count:'0'
        },
        {
          icon: "../static/img/wodekapian.png",
          word: "银行卡",
          url: "./mycard.html",
          count:'0'
        }
      ],
      listData: [
        {
          icon: "../static/img/shoucang.png",
          word: "我的收藏",
          url: "./collectProduct.html"
        },
        {
          icon: "../static/img/fabu.png",
          word: "我的评论和发布"
          ,
          url: "./mycomment.html?selected=1"
        },
        {
          icon: "../static/img/zuji.png",
          word: "我的足迹",
          url: "./mydiscoverProduct.html"
        },
        {
          icon: "../static/img/bangzhu.png",
          word: "帮助中心",
          url: "./helpcenter.html"
        }
      ],
      nickname: "",
      tel: "",
      hasLogin: false
    }
  },
  filters:{
    phoneViewFilter(val){
      return val.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
  },
  created() {
    let vm = this;
    // TUDO 更换头像  
    bus.$on("changePortrait",imgData =>{
      vm.portrait = imgData;
    })
  },
  mounted() {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
    var token = commons.getCookie("token"),vm = this;
    if (window.localStorage.getItem("active") == "2") {
      window.localStorage.setItem("active", "1");
    }

    this.$http
      .post("/loansupermarket-app/personal/getApplyListCount", { token })
      .then(res => {
        let resBody = res.body;
        if(resBody.code == "000"){
            let data = resBody.data;
            vm.navList[0].count = data.applyCount;
            vm.navList[1].count = data.enchashmentRecordCount;
            vm.navList[2].count = data.paybindAccount;
        }
      });
    // 调用用户信息接口，获取手机号码(如果本地sessionStorage存储了手机号说明已登录，那么不去请求queryUser接口)
    if (!window.sessionStorage.getItem("tel")) {
      this.hasLogin = false;
      // 获取用户信息
      this.$http
        .post("/loansupermarket-app/user/queryUser", { token: token })
        .then(function(response) {
          var resBody = response.body;
          if (resBody.code == "000") {
            // 存储用户上下文信息
            sessionStorage.setItem("phone", resBody.data.phone||'');
            sessionStorage.setItem("tel", resBody.data.phone||'');
            sessionStorage.setItem("realName", resBody.data.name||'');
            sessionStorage.setItem("nickname",resBody.data.nickName || resBody.data.phone||'');
            sessionStorage.setItem("idcardCode", resBody.data.idCard || "");
            sessionStorage.setItem("headImg",resBody.data.head_Img_Url || "../../../static/img/logo.png");
            this.nickname = resBody.data.nickName || "";
            this.tel = resBody.data.phone || "";
            this.portrait = sessionStorage.getItem("headImg");
            this.hasLogin = true;
          }
        });
    } else {
      this.hasLogin = true;
      this.tel = sessionStorage.getItem("tel");
      this.portrait = sessionStorage.getItem("headImg");
      this.nickname = sessionStorage.getItem("nickname") || this.tel;
    }
  },
  methods: {
    changeImg(){
      $('#imgInp').click();
    },
    changeNickname() {
      // this.$router.push({path: "/completeInformation/identityAuthentication"});
      window.location.href='./identityAuthentication.html?prePath=/main/mine';
    }, 
    blurNickname() {
      this.nicknameInp = true;
      let postData = {
        nickName: this.nickname
      };
      this.$http
        .post("/loansupermarket-app/user/idenAuttt", postData)
        .then(res => {
            Indicator.close();
          let resBody = res.body;
          if (resBody.code == "000") {
            this.$router.push({ path: "/completeInformation" });
          } else {
            MessageBox.alert(resBody.mesg, "提示");
          }
        });
    },
    goPage(url) {
      if (this.hasLogin) {
        // 如果已经登录，那么直接跳转到相应的页面
        // this.$router.push({ path: url });
        window.location.href=url;
      } else {
        // 如果是帮助中心则不需要登录也可以看，其他的页面则需要登录后才能看
        if (url == "./helpcenter.html") {
          // this.$router.push({ path: url });
          window.location.href=url;
        } else {
          // this.$router.push({ path: "/login", query: { history: 1 } });
          window.location.href='../user/login.html?history=1';
        }
      }
    },
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    },
    goSetting() {
      // 如果已经登录就可以进入设置页面，否则进进不了
      if (this.hasLogin) {
        // this.$router.push({ path: "/setting" });
        window.location.href='./setting.html';
      } else {
        // this.$router.push({ path: "/login", query: { history: 1 } });
        window.location.href='../user/login.html?history=1';
      }
    },
    goLogin() {
      // this.$router.push({ path: "/login" });
      window.location.href='../user/login.html?history=1';
    }
    
  }
}
</script>
<style lang="scss" scoped>
@import '../../../scss/base.scss';
.mine {
  width: 100%;
  margin-bottom: 2rem;
  &-header {
    z-index: 3;
    display: flex;
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    .icon-fan {
      text-align: left;
      box-sizing: border-box;
      padding-left: 0.4rem;
      flex: 2;
      color: #fff;
    }
    span {
      flex: 8;
      font-size: 0.45rem;
      color: #fff;
    }
    .icon-shezhi1 {
      flex: 2;
      text-align: right;
      box-sizing: border-box;
      padding-right: 0.4rem;
      font-size: 0.6rem;
      color: #fff;
    }
  }
  &-banner {
    width: 100%;
    height: 6.6rem;
    background: url("../../../assets/mineBg.png") no-repeat 10% 0;
    background-size: 100% 88%;
    margin-top: -1.2rem;
    &-headerpic {
      width: 1.5rem;
      height: 1.5rem;
      float: left;
      margin-left: 1.8rem;
      margin-top: 2rem;
      transform: translate(-50%, -30%);
      overflow: hidden;
      border-radius: 10px;
      background-color: #ffffff;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-username {
      width: 6rem;
      float: left;
      margin-top: 1.5rem;
      margin-left: -0.2rem;
      color: #ffffff;
      &-box {
        height: 1.5rem;
        p {
          text-align: left;
        }
        .nickname {
          font-size: 0.45rem;
          line-height: 0.9rem;
          &-label {
            float: left;
            width: 20%;
          }
          &-ipt {
            float: left;
            width: 60%;
            color: #ffffff;
            line-height: 0.9rem;
            background: transparent;
            outline: none;
            border: none;
          }
          &-btn {
            margin-left: 0.5rem;
          }
        }
        .tel {
          line-height: 0.6rem;
        }
      }
      .login-please {
        font-size: 0.4rem;
        margin-top: 0.45rem;
        text-align: left;
      }
    }
    &-nav {
      position: relative;
      margin: auto;
      top: 0.5rem;
      padding: 0.5rem 0;
      width: 92%;
      @include flexContainer;
      justify-content: space-between;
      background-color: #fff;
      border-radius: 0.2rem;
      z-index: 99;
      &-item {
        width: 33%;
        @include flexItem;
        border-right: 1px solid #e4e4e4;
        &:last-child {
          border: none;
        }
        h3 {
          font-size: 0.6rem;
        }
      }
    }
  }
  &-list {
    margin-top: 0.4rem;
    width: 100%;
    &-item {
      &:active {
        background: #efefef;
      }
      line-height: 1.33rem;
      font-size: 0.38rem;
      font-family: "雅黑";
      height: 1.33rem;
      background: #fff;
      width: 100%;
      display: flex;
      &-icon {
        flex: 1.5;
        img {
          width: 0.52rem;
          height: 0.52rem;
          margin-top: 0.42rem;
        }
      }
      &:last-child > div {
        border: none;
      }
      &-word {
        text-align: left;
        border-bottom: 1px solid #e4e4e4;
        flex: 9;
      }
      &-extend {
        overflow: hidden;
        border-bottom: 1px solid #e4e4e4;
        flex: 1.5;
      }
      &:nth-of-type(5) {
        .mine-list-item-word {
          border-bottom: none;
        }
        .mine-list-item-extend {
          border-bottom: none;
        }
      }
    }
  }
}
.input-file{
  display: none;
}

</style>
